<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/resets.css" />
    <link rel="stylesheet" href="css/goodsinfo.css">
</head>

<body>
    <aside></aside>
    <header></header>
    <nav class="search"></nav>
    <section class="goods">
        <div class="center">
            <!-- 放大0镜 -->
            <div class="left">
                <div id="small-box">

                    <div id="mask"></div>
                </div>

                <div id="big-box">

                </div>
            </div>
            <div class="right">
                <div class="name">
                    <p><b><img src="imgs/ziying2.png" style="width: 68px;height: 25px;" alt=""></b> <strong
                            id="mingzi">小米小爱音箱</strong>
                        Pro<span>有品秒杀</span></p>
                </div>
                <div class="jieshao">
                    智能设备控制，QQ音乐海量曲库，海量优质的有声读物，卓越音质
                </div>
                <div class="cuxiao">
                    <h5>促销</h5>
                    <p>
                        <span>有品秒杀
                        </span>
                        <u id="limit">商品限购3件，超出限购数量不可购买</u>
                    </p>
                </div>
                <div class="more">
                    <h5>更多</h5>
                    <p>
                        双12火热开启，智能门锁只讲300
                    </p>
                </div>
                <div class="stylebox">
                    <div class="price">
                        <h5>售价</h5>
                        <span>￥</span>
                        <p id="pri">269</p>
                        <del>299</del>

                    </div>
                    <div class="serve">
                        <h5>服务</h5>
                        <p>
                            <span>满69包邮</span>
                            <span>小米自营</span>
                            <span>7天无理由</span>
                            <span>7天保价</span>
                        </p>
                    </div>
                </div>
                <div>
                    <p class="address">
                    <h5>配送区域</h5>
                    <span>北京</span>
                    <span>北京市</span>
                    <span>海淀区</span>
                    <span>有货</span>
                    <span>修改</span>
                    </p>

                </div>
                <div id="count">
                    <h5>数量</h5>
                    <b class="decrement"> -</b>
                    <input type="text" class="itxt" value="0">
                    <b class=".div increment">+</b>
                </div>

                <div class="button">
                    <span class="cart">加入购物车</span><span class="buy">立即购买</span>
                </div>
            </div>

        </div>
    </section>
    <section class="images">
        <div class="center">
            <div class="banner">
                <div class="head-line">
                    <span>商品详情</span>
                    <span>常见问题</span>
                    <span>参数</span>
                </div>
                <!-- <img src="imgs/e85a8fc7_02c6_44c9_9d68_b53a329b0d0f.jpeg"  style="width: 100%;" alt=""> -->

            </div>
            <div class="imgg">
                <div class="titleflag">
                    <img class="logo" src="imgs/mi_zy.png" style="width: 30px;height: 30px;" alt="">
                    小米<span>自营</span>让每个人都能...
                    <b>进入</b>
                    <p class="xiangguan">
                        - 相关好物 -
                    </p>

                </div>

                <div class="imglist">

                </div>

            </div>

        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="js/jQuery.js"> </script>
<script src="js/fdj2.js"></script>
<script src="js/cookieTools.js"></script>

<script>
    console.log(getCookie("name"));
    $("header").load("header.html"); /* 头部封装引入 */
    $(".search").load("search.html"); /* 搜索区封装引入 */
    $("footer").load("footer.html"); /* 尾部封装引入  */
    $("aside").load("aside.html");/* 侧边栏 */


    //==========获取跨页商品列表来的参数================
    $.getUrlParam = function (name) {//name是上个页面传进来的参数名 通过这个函数将参数值解析出来 调用一下即可
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return null;
    }
    console.log($.getUrlParam("goodsId"));
    let index = $.getUrlParam("goodsId");


    $.get("getGoodsList.php", `goodsId=${index}`, function ($str) {
        let arr = JSON.parse($str);
        console.log(index);
        console.log(arr);
        let oUl = $("<ul class='listimgs'><ul>");
        $(".left").append(oUl);

        console.log(arr, index);
        let i = index;
        let goodsName = arr[i].goodsName;
        let goodsImg = arr[i].beiyong1;
        let goodsImg2 = arr[i].beiyong2;
        let bigimg = arr[i].goodsImg;
        let smallimg0 = arr[i].beiyong4;
        let smallimg1 = arr[i].beiyong5;
        let smallimg2 = arr[i].beiyong6;
        let smallimg3 = arr[i].beiyong7;
        let price = arr[i].goodsPrice;
        let oPrice = arr[i].beiyong8;
        let discribe = arr[i].goodsDesc;
        let limited = arr[i].beiyong9;

        // let listimgs = arr[i].
        // smallbox里的图
        $("#small-box ").css({
            background: `url("imgs/${bigimg}") no-repeat `,
            backgroundSize: "372px 372px"

        })
        // bigbox里的背景图
        $("#big-box").css({
            background: `url("imgs/${bigimg}") no-repeat `,
            backgroundSize: "1488px 1488px"

        })
        $("#small-box ").css({
            background: `url("imgs/${bigimg}") no-repeat `,
            backgroundSize: "372px 372px"

        })

        // 商品名字
        $("#mingzi").html(goodsName);
        // 商品描述
        $(".jieshao").html(discribe);

        // 这是限购件数
        $("#limit").html(`该商品限购${limited}件，超出限购数量无法购买`)
        //这是价格
        $("#pri").html(price)
        //这是原价
        $("del").html(oPrice)
        //这是左下角大贴图
        $(".banner").eq(i).html(
            ` <img class="goodsImgs" src="imgs/${goodsImg}" 
            style="width: 100%; alt="">`
        );
        // 这是右下角商品竖列
        $(".imglist").eq(i).html(
            ` <img class="small" src="imgs/${goodsImg2}" style="width:  98%; alt="">`
        )

        //    这是放大镜的小列表图
        $(".listimgs").html(
            `<li class="li">
                    <img src="imgs/${smallimg0}" alt="">
                 </li>
                 <li class="li">
                    <img src="imgs/${smallimg1}" alt="">
                 </li>
                 <li class="li">
                    <img src="imgs/${smallimg2}" alt="">
                 </li>
                 <li class="li">
                    <img src="imgs/${smallimg3}" alt="">
                 </li>`
        )


        // for (let j = 0; j < $(".li").length; j++) {
        $(".li").click(function () {

            let src1 = $(this).find("img").attr("src");
            console.log(src1);
            console.log($("#small-box"));
            $("#small-box").eq(0).css({
                backgroundImage: `url(${src1})`
            })
            $("#big-box").eq(0).css({
                backgroundImage: `url(${src1})`
            })


        })
        // }
        //==============================放大镜===============================
        //2、将方法中会用到的元素进行获取绑定，再以参数的形式传入类

        let oSmallBox = document.querySelector("#small-box");
        let oBigBox = document.querySelector("#big-box");
        let oMask = document.querySelector("#mask");
        let oLis = document.querySelectorAll("#li");
        //3、new出一个实例，将获取的元素作为参数传入；
        let mf = new Magnifier(oSmallBox, oBigBox, oMask, oLis);
        mf.eventBind();
    })

    //获得详情页的商品数量
    // 3. 增减商品数量模块 
    $(".increment").click(function () {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);


    });
    $(".decrement").click(function () {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);


    });
    let r = getCookie("name");

$(".cart").click(function(){
    if(r!=""){
        $.post("addShoppingCart.php", { vipName: r, goodsId: index,goodsCount: $(".itxt").val()}
    )
    location.href = "cart.html";

    }else{
        location.href = "Reg.html";
    }
   
})
    console.log(getCookie("name"), $(".itxt").val(),index);




</script>